<template>
  <view class="illegal-parking-section">
    <view class="section-header">
      <text class="section-title">违停数据</text>
      <text class="section-subtitle">{{ getCurrentDate() }}</text>
    </view>
    
    <view class="data-grid">
      <view 
        v-for="(item, index) in illegalParkingStats" 
        :key="index" 
        class="data-item"
        @click="handleDataClick(item)"
      >
        <view class="data-header">
          <view :class="['data-icon', item.iconClass]"></view>
          <view class="data-info">
            <text class="data-label">{{ item.label }}</text>
            <text class="data-desc">{{ item.description }}</text>
          </view>
        </view>
        <view class="data-content">
          <view class="data-number">{{ item.count }}</view>
          <view class="data-unit">{{ item.unit }}</view>
        </view>
        <view class="data-footer">
          <text class="data-trend" :class="item.trendClass">{{ item.trend }}</text>
          <text class="data-time">{{ item.updateTime }}</text>
        </view>
      </view>
    </view>

    <!-- 违停区域分布 -->
    <view class="distribution-section">
      <view class="section-header">
        <text class="section-title">违停区域分布</text>
        <text class="section-action" @click="refreshDistribution">刷新</text>
      </view>
      
      <view class="distribution-chart">
        <qiun-data-charts 
          type="pie"
          :opts="distributionOpts"
          :chartData="distributionData"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const emit = defineEmits(['refresh', 'detail'])

const illegalParkingStats = ref([])
const distributionData = ref({
  series: []
})

// 图表配置
const distributionOpts = ref({
  color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B'],
  padding: [5, 5, 5, 5],
  dataLabel: true,
  legend: {
    show: true,
    position: 'right',
    lineHeight: 25,
  },
  extra: {
    pie: {
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: false,
      borderWidth: 3,
      borderColor: '#FFFFFF'
    }
  }
})

// 获取当前日期
const getCurrentDate = () => {
  const now = new Date()
  const month = now.getMonth() + 1
  const day = now.getDate()
  return `${month}月${day}日`
}

// 获取违停数据统计
const loadIllegalParkingStats = async () => {
  try {
    // 暂时使用模拟数据
    illegalParkingStats.value = [
      {
        label: '今日违停',
        description: '今日发现的违停车辆',
        count: 42,
        unit: '辆',
        iconClass: 'icon-today',
        type: 'today',
        trend: '较昨日 +8',
        trendClass: 'trend-up',
        updateTime: '10分钟前'
      },
      {
        label: '待处理违停',
        description: '需要处理的违停车辆',
        count: 15,
        unit: '辆',
        iconClass: 'icon-pending',
        type: 'pending',
        trend: '较昨日 -3',
        trendClass: 'trend-down',
        updateTime: '5分钟前'
      }
    ]

    // 加载区域分布数据
    loadDistributionData()
  } catch (error) {
    console.error('获取违停数据统计失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
  }
}

// 加载区域分布数据
const loadDistributionData = () => {
  // 模拟数据
  distributionData.value = {
    series: [
      {
        data: [
          {name: '东区停车场', value: 15},
          {name: '西区商业街', value: 12},
          {name: '南区公园', value: 8},
          {name: '北区住宅区', value: 5},
          {name: '中心广场', value: 2}
        ]
      }
    ]
  }
}

// 刷新区域分布数据
const refreshDistribution = () => {
  loadDistributionData()
  uni.showToast({
    title: '区域分布已刷新',
    icon: 'success'
  })
}

// 处理数据项点击
const handleDataClick = (item) => {
  console.log('点击违停数据项:', item)
  emit('detail', item.type, item)
}

// 刷新数据
const refreshData = async () => {
  await loadIllegalParkingStats()
  emit('refresh')
}

onMounted(() => {
  refreshData()
})

// 暴露刷新方法给父组件
defineExpose({
  refreshData
})
</script>

<style lang="scss" scoped>
.illegal-parking-section {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 30rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .section-subtitle {
      font-size: 24rpx;
      color: #999;
    }

    .section-action {
      font-size: 24rpx;
      color: #1890ff;
    }
  }
  
  .data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
    margin-bottom: 30rpx;
    
    .data-item {
      background-color: #f9f9f9;
      border-radius: 8rpx;
      padding: 20rpx;
      
      .data-header {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        .data-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
          background-color: #e6f7ff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.icon-today {
            background-color: #e6f7ff;
          }
          
          &.icon-pending {
            background-color: #fff7e6;
          }
        }
        
        .data-info {
          flex: 1;
          
          .data-label {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            display: block;
          }
          
          .data-desc {
            font-size: 22rpx;
            color: #999;
            display: block;
          }
        }
      }
      
      .data-content {
        display: flex;
        align-items: baseline;
        margin-bottom: 15rpx;
        
        .data-number {
          font-size: 40rpx;
          font-weight: 600;
          color: #1890ff;
        }
        
        .data-unit {
          font-size: 24rpx;
          color: #999;
          margin-left: 5rpx;
        }
      }
      
      .data-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .data-trend {
          font-size: 22rpx;
          
          &.trend-up {
            color: #f5222d;
          }
          
          &.trend-down {
            color: #52c41a;
          }
        }
        
        .data-time {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }

  .distribution-section {
    .distribution-chart {
      height: 400rpx;
    }
  }
}
</style>